<template>
  <div class="list-common-table">
    <t-form
      ref="form"
      :data="formData"
      :label-width="80"
      colon
      :style="{ marginBottom: '8px' }"
      @reset="onReset"
      @submit="onSubmit"
    >
      <t-row>
        <t-col :span="10">
          <t-row :gutter="[16, 24]">
            <t-col :flex="1">
              <t-form-item
                label="合同名称"
                name="name"
              >
                <t-input
                  v-model="formData.name"
                  class="form-item-content"
                  type="search"
                  placeholder="请输入合同名称"
                  :style="{ minWidth: '134px' }"
                />
              </t-form-item>
            </t-col>
            <t-col :flex="1">
              <t-form-item
                label="合同状态"
                name="status"
              >
                <t-select
                  v-model="formData.status"
                  class="form-item-content`"
                  :options="CONTRACT_STATUS_OPTIONS"
                  placeholder="请选择合同状态"
                />
              </t-form-item>
            </t-col>
            <t-col :flex="1">
              <t-form-item
                label="合同编号"
                name="no"
              >
                <t-input
                  v-model="formData.no"
                  class="form-item-content"
                  placeholder="请输入合同编号"
                  :style="{ minWidth: '134px' }"
                />
              </t-form-item>
            </t-col>
            <t-col :flex="1">
              <t-form-item
                label="合同类型"
                name="type"
              >
                <t-select
                  v-model="formData.type"
                  class="form-item-content`"
                  :options="CONTRACT_TYPE_OPTIONS"
                  placeholder="请选择合同类型"
                />
              </t-form-item>
            </t-col>
          </t-row>
        </t-col>

        <t-col
          :span="2"
          class="operation-container"
        >
          <t-button
            theme="primary"
            type="submit"
            :style="{ marginLeft: '8px' }"
          >
            查询
          </t-button>
          <t-button
            type="reset"
            variant="base"
            theme="default"
          >
            重置
          </t-button>
        </t-col>
      </t-row>
    </t-form>
    <div class="table-container">
      <t-table
        :data="data"
        :columns="columns"
        :row-key="rowKey"
        :vertical-align="verticalAlign"
        :hover="hover"
        :pagination="pagination"
        :loading="dataLoading"
        :header-affixed-top="true"
        :header-affix-props="{ offsetTop, container: getContainer }"
        @page-change="rehandlePageChange"
        @change="rehandleChange"
      >
        <template #status="{ row }">
          <t-tag
            v-if="row.status === CONTRACT_STATUS.FAIL"
            theme="danger"
            variant="light"
          >
            审核失败
          </t-tag>
          <t-tag
            v-if="row.status === CONTRACT_STATUS.AUDIT_PENDING"
            theme="warning"
            variant="light"
          >
            待审核
          </t-tag>
          <t-tag
            v-if="row.status === CONTRACT_STATUS.EXEC_PENDING"
            theme="warning"
            variant="light"
          >
            待履行
          </t-tag>
          <t-tag
            v-if="row.status === CONTRACT_STATUS.EXECUTING"
            theme="success"
            variant="light"
          >
            履行中
          </t-tag>
          <t-tag
            v-if="row.status === CONTRACT_STATUS.FINISH"
            theme="success"
            variant="light"
          >
            已完成
          </t-tag>
        </template>
        <template #contractType="{ row }">
          <p v-if="row.contractType === CONTRACT_TYPES.MAIN">
            审核失败
          </p>
          <p v-if="row.contractType === CONTRACT_TYPES.SUB">
            待审核
          </p>
          <p v-if="row.contractType === CONTRACT_TYPES.SUPPLEMENT">
            待履行
          </p>
        </template>
        <template #paymentType="{ row }">
          <p
            v-if="row.paymentType === CONTRACT_PAYMENT_TYPES.PAYMENT"
            class="payment-col"
          >
            付款
            <trend
              class="dashboard-item-trend"
              type="up"
            />
          </p>
          <p
            v-if="row.paymentType === CONTRACT_PAYMENT_TYPES.RECIPT"
            class="payment-col"
          >
            收款
            <trend
              class="dashboard-item-trend"
              type="down"
            />
          </p>
        </template>
        <template #op="slotProps">
          <a
            class="t-button-link"
            @click="rehandleClickOp(slotProps)"
          >管理</a>
          <a
            class="t-button-link"
            @click="handleClickDelete(slotProps)"
          >删除</a>
        </template>
      </t-table>
      <t-dialog
        header="确认删除当前所选合同？"
        :body="confirmBody"
        :visible.sync="confirmVisible"
        :on-cancel="onCancel"
        @confirm="onConfirmDelete"
      />
    </div>
  </div>
</template>
<script>
import { prefix } from "@/config/global";
import Trend from "@/components/mainEntrance/trend/index.vue";

import {
  CONTRACT_STATUS,
  CONTRACT_STATUS_OPTIONS,
  CONTRACT_TYPES,
  CONTRACT_TYPE_OPTIONS,
  CONTRACT_PAYMENT_TYPES
} from "@/constants";

export default {
  name: "ListTable",
  components: {
    Trend
  },
  data() {
    return {
      CONTRACT_STATUS,
      CONTRACT_STATUS_OPTIONS,
      CONTRACT_TYPES,
      CONTRACT_TYPE_OPTIONS,
      CONTRACT_PAYMENT_TYPES,
      prefix,
      formData: {
        name: "",
        no: undefined,
        status: undefined
      },
      data: [],
      dataLoading: false,
      value: "first",
      columns: [
        {
          title: "合同名称",
          fixed: "left",
          width: 200,
          align: "left",
          ellipsis: true,
          colKey: "name"
        },
        { title: "合同状态", colKey: "status", width: 200, cell: { col: "status" } },
        {
          title: "合同编号",
          width: 200,
          ellipsis: true,
          colKey: "no"
        },
        {
          title: "合同类型",
          width: 200,
          ellipsis: true,
          colKey: "contractType"
        },
        {
          title: "合同收付类型",
          width: 200,
          ellipsis: true,
          colKey: "paymentType"
        },
        {
          title: "合同金额 (元)",
          width: 200,
          ellipsis: true,
          colKey: "amount"
        },
        {
          align: "left",
          fixed: "right",
          width: 200,
          colKey: "op",
          title: "操作"
        }
      ],
      rowKey: "index",
      tableLayout: "auto",
      verticalAlign: "top",
      bordered: true,
      hover: true,
      rowClassName: rowKey => `${rowKey}-class`,
      // 与pagination对齐
      pagination: {
        defaultPageSize: 20,
        total: 100,
        defaultCurrent: 1
      },
      confirmVisible: false,
      deleteIdx: -1
    };
  },
  computed: {
    confirmBody() {
      if (this.deleteIdx > -1) {
        const { name } = this.data?.[this.deleteIdx];
        return `删除后，${name}的所有合同信息将被清空，且无法恢复`;
      }
      return "";
    },
    offsetTop() {
      return this.$store.state.setting.isUseTabsRouter ? 48 : 0;
    }
  },
  mounted() {
    this.dataLoading = true;
    this.$request
      .get("/api/get-list")
      .then(res => {
        if (res.code === 0) {
          const { list = [] } = res.data;
          this.data = list;
          this.pagination = {
            ...this.pagination,
            total: list.length
          };
        }
      })
      .catch(() => { })
      .finally(() => {
        this.dataLoading = false;
      });
  },
  methods: {
    getContainer() {
      return document.querySelector(".tdesign-starter-layout");
    },
    onReset() {

    },
    onSubmit() {

    },
    // eslint-disable-next-line
    rehandlePageChange(curr, pageInfo) {
    },
    // eslint-disable-next-line
    rehandleChange(changeParams, triggerAndData) {
    },
    // eslint-disable-next-line
    rehandleClickOp({ text, row }) {
    },
    handleClickDelete(row) {
      this.deleteIdx = row.rowIndex;
      this.confirmVisible = true;
    },
    onConfirmDelete() {
      // 真实业务请发起请求
      this.data.splice(this.deleteIdx, 1);
      this.pagination.total = this.data.length;
      this.confirmVisible = false;
      this.$message.success("删除成功");
      this.resetIdx();
    },
    onCancel() {
      this.resetIdx();
    },
    resetIdx() {
      this.deleteIdx = -1;
    }
  }
};
</script>

<style lang="less" scoped>
@import "@/style/variables.less";

.list-common-table {
  background-color: var(--td-bg-color-container);
  padding: 30px 32px;
  border-radius: @border-radius;
}

.form-item-content {
  width: 100%;
}

.operation-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.payment-col {
  display: flex;

  .trend-container {
    display: flex;
    align-items: center;
    margin-left: 8px;
  }
}

.t-button + .t-button {
  margin-left: @spacer;
}
</style>